import React from 'react';
import PropTypes from 'prop-types';
import cn from 'classnames';
import { withRouter } from 'react-router';

import Tabs, { TabPane } from '@kuiper-components/tabs';

import Breadcrumb, { Item } from '../../../components/Breadcrumb';
import URL from './URL';
import s from './Blacklist.module.css';
import Strategy from './Strategy';

function Blacklist({
	className,
	history,
	match: {
		params: { type },
	},
}) {
	const handleTabChange = key => {
		history.push(`/yfld/blacklist/${key}`);
	};

	return (
		<section className={cn(className, s.blacklist)}>
			<Breadcrumb className={s.breadcrumb}>
				<Item key="yfld">云防联动</Item>
				<Item key="">功能设置</Item>
				<Item key="blacklist">风险应急响应</Item>
			</Breadcrumb>
			<main className={cn('scanv-page-container', s.content)}>
				<Tabs className={s.tabs} activeKey={type} onChange={handleTabChange}>
					<TabPane key="strategy" tab="策略设置">
						<Strategy className={s.tabPane} />
					</TabPane>
					<TabPane key="url" tab="URL黑名单">
						<URL className={s.tabPane} />
					</TabPane>
				</Tabs>
			</main>
		</section>
	);
}

Blacklist.propTypes = {
	className: PropTypes.string,
	match: PropTypes.shape({
		params: PropTypes.shape({
			type: PropTypes.string.isRequired,
		}),
	}),
	history: PropTypes.shape({
		push: PropTypes.func.isRequired,
	}),
};

Blacklist.defaultProps = {
	className: s.blacklist,
};

export default withRouter(Blacklist);
